<template>
  <view class="goods-info-container">
    <!-- 商品基本信息 -->
    <view class="info-section">
      <view class="section-title">商品信息</view>
      <view class="info-item">
        <text class="info-label">产品名：</text>
        <text class="info-value">{{ goodsInfo.product_name }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">商品名：</text>
        <text class="info-value">{{ goodsInfo.goods_name }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">品牌：</text>
        <text class="info-value">{{ goodsInfo.brand.name }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">商品分类：</text>
        <text class="info-value">{{ goodsInfo.category.name }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">商品单位：</text>
        <text class="info-value">{{ goodsInfo.unit }}</text>
      </view>
    </view>

    <!-- 商品规格表 -->
    <view class="info-section">
      <view class="section-title">商品规格</view>
      <view class="spec-table">
        <view class="table-header">
          <view
            class="table-cell"
            v-for="(header, index) in tableHeaders"
            :key="index"
          >
            {{ header }}
          </view>
        </view>
        <view
          class="table-row"
          v-for="(row, rowIndex) in skuTableData"
          :key="rowIndex"
        >
          <view
            class="table-cell"
            v-for="(header, colIndex) in tableHeaders"
            :key="colIndex"
          >
            {{ row[header] }}
          </view>
        </view>
      </view>
    </view>

    <!-- 折扣设置 -->
    <view class="info-section">
      <view class="section-title">折扣设置</view>
      <view
        class="discount-item"
        v-for="(discount, index) in discounts"
        :key="index"
      >
        <view class="discount-label">{{ discount.label }}：</view>
        <view class="discount-specs">
          <text
            v-for="(spec, specIndex) in discount.specs"
            :key="specIndex"
            class="discount-spec"
            >{{ spec }}</text
          >
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { getGoodsDetail } from "@/api/goods";
import { onLoad } from "@dcloudio/uni-app";
// 商品基本信息
const goodsInfo = ref({
  product_name: "",
  goods_name: "",
  brand: "",
  category: "",
  goods_sku_data: [],
  set_discount: [],
});

// 表格表头
const tableHeaders = ref([]);

// SKU表格数据
const skuTableData = ref([]);

// 折扣数据
const discounts = ref([]);

// 生成规格表格数据
const generateTableData = (data) => {
  // 定义规格和属性
  let arr = [];
  data.forEach((item) => {
    let obj = {};
    let skuName = item.goods_spec_value_names.split(",");
    tableHeaders.value.forEach((header, index) => {
      obj[header] = skuName[index];
    });
    obj["厂价"] = item.factory_price || "";
    arr.push(obj);
  });
  return arr;
};
//处理折扣数据
const generateDiscountData = (data) => {
  discounts.value = data.map((item) => ({
    label: item.discount || "",
    specs: item.goods_spec_value_names || [],
  }));
};

const getGoodsDetailData = async (id) => {
  const res = await getGoodsDetail({ id });
  console.log(res);
  goodsInfo.value = res;
  if (res.goods_sku_data.length > 0) {
    tableHeaders.value = [
      ...res.goods_sku_data[0].goods_spec_name.split(","),
      "厂价",
    ];
    // 初始化表格数据
    skuTableData.value = generateTableData(res.goods_sku_data);
    generateDiscountData(res.set_discount);
}
};

onLoad((options) => {
  getGoodsDetailData(options.id);
});
</script>

<style scoped>
.goods-info-container {
  /* padding-bottom: 100rpx; */
  background-color: #f5f5f5;
}

/* 信息区域通用样式 */
.info-section {
  background-color: #fff;
  margin-bottom: 20rpx;
  padding: 20rpx;
}

.section-title {
  font-size: 32rpx;
  color: #409eff;
  margin-bottom: 20rpx;
  border-bottom: 1px solid #eee;
  padding-bottom: 10rpx;
}

.info-item {
  display: flex;
  padding: 10rpx 0;
}

.info-label {
  width: 150rpx;
  color: #666;
  font-size: 28rpx;
}

.info-value {
  flex: 1;
  font-size: 28rpx;
  color: #333;
}

/* 规格表格样式 */
.spec-table {
  border: 1px solid #ddd;
  border-radius: 8rpx;
  overflow: hidden;
}

.table-header {
  display: flex;
  background-color: #f6f6f6;
  border-bottom: 1px solid #ddd;
}

.table-row {
  display: flex;
  border-bottom: 1px solid #eee;
}

.table-row:last-child {
  border-bottom: none;
}

.table-cell {
  flex: 1;
  padding: 20rpx;
  text-align: center;
  font-size: 28rpx;
  border-right: 1px solid #eee;
  display: flex;
  align-items: center;
  justify-content: center;
}

.table-cell:last-child {
  border-right: none;
}

/* 折扣设置样式 */
.discount-item {
  margin-bottom: 20rpx;
  padding-bottom: 10rpx;
  border-bottom: 1px solid #eee;
}

.discount-label {
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.discount-specs {
  display: flex;
  flex-wrap: wrap;
}

.discount-spec {
  margin-right: 20rpx;
  margin-bottom: 10rpx;
  font-size: 26rpx;
  color: #666;
}

/* 底部按钮 */
.bottom-actions {
  position: fixed;
  bottom: 0;
  right: 0;
  padding: 20rpx;
}

.action-btn {
  width: 80rpx;
  height: 80rpx;
  background-color: #1989fa;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 28rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
}

.translate-btn {
  background-color: #1989fa;
}
</style>
